<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>班级点名系统案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding: 20px;
    }

    h1 {
      padding: 10px;
      background-color: #9acd32;
      color: purple;
      margin: 10px 0;
    }

    button {
      width: 100px;
      height: 50px;
      border-radius: 25px;
      background-color: #9acd32;
      color: #fff;
      border: none;
      font-size: 20px;
    }

    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    li {
      width: 100px;
      height: 40px;
      background-color: #000;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
    }

    /* 在随机抽取的过程中被选中的 */
    .active {
      background-color: #9acd32;
      color: #fff;
    }

    /* 确定下来了 最终被选中 */
    .select {
      background-color: palevioletred;
      color: #fff;
    }
  </style>
</head>

<body>
  <h1>被选中的小伙伴们:</h1>
  <button>开始</button>
  <ul></ul>
  <script>
    // 获取dom元素开始按钮
    const button = document.querySelector('button');
    // 获取ul标签
    const ul = document.querySelector('ul');
    // 获取h1标签
    const h1 = document.querySelector('h1');
    // 获取同学名单
    const names =
      "张三 李四 王二 坤坤 麻子 曹操 刘备 孙权 貂蝉 关羽 张飞 诸葛亮 司马懿 刘禅 赵云 吕布 张辽 蒙恬 鲁肃 凤雏 马超 黄盖 袁绍 袁术".split(" ");
    // 将同学名单通过li标签展示
    function getRedhtml() {
      const html = names
        .map(function (value) {
          return `<li>${value}</li>`;
        }).join(" ");
      // 将生成的li标签放到ul标签中
      ul.innerHTML = html;
    }
    getRedhtml();


    // 注册点击开始按钮事件
    button.addEventListener('click', function () {
      // 开启定时器
      const timeId = setInterval(function () {
        // 找到旧的带有active类名的li标签
        const activeLi = document.querySelector('li.active');
        // 判断是否有找到旧的li标签
        if (activeLi) {
          // 找到后移出原有的active类名
          activeLi.classList.remove('active');
        }
        // 获取没有中奖的人
        const lis = document.querySelectorAll('li:not(.select)');
        // 获取随机数
        const index = getRandom(0, lis.length - 1);
        // 将获取到的随机数放到的li标签中
        lis[index].classList.add('active');
        // 开始抽取时禁用按钮，防止一直点击
        button.disabled = true;
      }, 100);

      // 开启延时器，用来停止定时器开启的抽奖
      setTimeout(function () {
        clearInterval(timeId);
        const activeLi = document.querySelector('li.active');
        activeLi.classList.remove('active');
        // 为中奖的人添加类名标识
        activeLi.classList.add('select');
        // 将抽到的人姓名添加至h1标签中
        h1.innerHTML += `${activeLi.innerText} `;
        // 抽取结束时开启按钮
        button.disabled = false;
      }, 3000);
    });

    // 随机数生成函数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  </script>
</body>

</html>